	<template>
    <view>
        <!-- 筛选层 -->
        <view class="screening-box">
            <!-- 类别筛选 -->
            <view @click="toggleCatsStateMask('show')" class="f-tit-txt"
                >{{ filltersData.cat
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >
            <!-- 仓库筛选-->
            <view @click="toggleStoreStateMask('show')" class="f-tit-txt"
                >{{ filltersData.store
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >
            <!-- 产品筛选   检测用户是否有权 -->
            <view @click="toggleGoodsStateMask('show')" class="f-tit-txt"
                >{{ filltersData.inStock
                }}<text class="icon-font arrow-xiala-font">&#xe618;</text></view
            >
            <!-- 筛选  -->
            <view
                @click="toggleHandlersStateMask('show')"
                class="f-tit-txt"
                v-if="md == 1 && tabIndex == 1"
                >{{ filltersData.screening
                }}<text
                    class="icon-font"
                    style="font-size: 22px; padding-left: 0px"
                    >&#xe625;</text
                ></view
            >
        </view>
        <view class="Handlers-box" v-if="HandlersLs && HandlersLs.length > 0">
            <view class="item" v-for="(item, index) in HandlersLs" :key="index">
                {{ item.title ? item.title : item.name ? item.name : ""
                }}<image
                    src="../../static/images/close.png"
                    @click="removeHandItem(item, index)"
                ></image>
            </view>
            <view class="h-rest-txt" @click="resetFollAndBrand">重置</view>
        </view>
        <!-- 类别筛选 -->
        <view
            class="good-mask mask-top"
            :style="{
                top: md == 3 || md == 5 ? '150px' : '',
                marginLeft: isExpand ? '240px' : '',
            }"
            :class="
                goodCatState === 0 ? 'none' : goodCatState === 1 ? 'show' : ''
            "
        >
            <view class="cat-content">
                <view class="cat-box">
                    <view class="cat-fisrt">
                        <view
                            v-for="(item, index) in catFisrtList"
                            :key="index"
                        >
                            <view
                                class="cate-item"
                                :class="
                                    selectedCat.fId == item.id
                                        ? 'itme-selected'
                                        : ''
                                "
                                @click="onClickFirst(item)"
                                >{{ item.title
                                }}{{
                                    item.num_gd ? `(${item.num_gd})` : ""
                                }}</view
                            >
                        </view>
                    </view>
                    <view class="cat-second">
                        <view
                            v-for="(item, index) in catSecondList"
                            :key="index"
                        >
                            <view
                                class="cate-item"
                                :class="
                                    selectedCat.sId == item.id
                                        ? 'itme-selected'
                                        : ''
                                "
                                @click="onClickSecond(item)"
                                >{{ item.title
                                }}{{
                                    item.num_gd ? `(${item.num_gd})` : ""
                                }}</view
                            >
                        </view>
                    </view>
                    <view class="cat-three">
                        <view
                            v-for="(item, index) in catThreeList"
                            :key="index"
                        >
                            <view
                                class="cate-item"
                                :class="
                                    selectedCat.tId == item.id
                                        ? 'itme-selected'
                                        : ''
                                "
                                @click="onClickThree(item)"
                                >{{ item.title
                                }}{{
                                    item.num_gd ? `(${item.num_gd})` : ""
                                }}</view
                            >
                        </view>
                    </view>
                </view>
                <view class="cat-btn-box">
                    <view class="cat-reset" @click="resetCat()">重置</view>
                    <view class="cat-comfirt" @click="sureCat()">选好了</view>
                </view>
            </view>
        </view>

        <!-- 仓库筛选 -->
        <view
            class="good-mask mask-top"
            :style="{
                top: md == 3 || md == 5 ? '150px' : '',
                marginLeft: isExpand ? '240px' : '',
            }"
            :class="
                cateStoreState === 0
                    ? 'none'
                    : cateStoreState === 1
                    ? 'show'
                    : ''
            "
            @click="toggleStoreStateMask"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="cate-list">
                    <view v-for="(item, index) in storeLs" :key="index">
                        <view
                            class="cate-item"
                            :class="{
                                active: index == filltersData.TimeStateIndex,
                            }"
                            @click="changeStoreState(item, index)"
                            >{{ item.name }}
                            <text class="store-num">{{ item.num }}</text>
                            <text
                                class="icon-font selected-icon"
                                v-show="index == filltersData.TimeStateIndex"
                                >&#xe636;</text
                            >
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 产品筛选 -->
        <view
            class="good-mask mask-top"
            :style="{
                top: md == 3 || md == 5 ? '150px' : '',
                marginLeft: isExpand ? '240px' : '',
            }"
            :class="
                cateGoodsState === 0
                    ? 'none'
                    : cateGoodsState === 1
                    ? 'show'
                    : ''
            "
            @click="toggleGoodsStateMask"
        >
            <view class="cate-content">
                <scroll-view scroll-y class="cate-list">
                    <view
                        v-for="item in md == 12 ? goodcgList : goodStateList"
                        :key="item.id"
                    >
                        <view
                            class="cate-item"
                            :class="{
                                active:
                                    item.id == filltersData.StoresStateIndex,
                            }"
                            @click="changeGoodState(item)"
                            >{{ item.name
                            }}<text
                                class="icon-font selected-icon"
                                v-show="
                                    item.id == filltersData.StoresStateIndex
                                "
                                >&#xe636;</text
                            ></view
                        >
                    </view>
                </scroll-view>
            </view>
        </view>

        <!--筛选 -->
        <view
            class="good-mask mask-top"
            :style="{
                top: md == 3 || md == 5 ? '150px' : '',
                marginLeft: isExpand ? '240px' : '',
            }"
            :class="
                cateHandlersState === 0
                    ? 'none'
                    : cateHandlersState === 1
                    ? 'show'
                    : ''
            "
        >
            <view class="cat-content">
                <view class="scr-box comm-list">
                    <view class="item">
                        <view class="i-title"> {{ followLs.title }} </view>
                        <view class="items-box">
                            <view
                                class="follow"
                                v-for="(item, index) in followLs.ls"
                                :key="index"
                                :class="{ active: item.id == followId }"
                                @click="onFollowItems(item, index)"
                            >
                                <view class="item-txt">{{ item.title }}</view>
                            </view>
                        </view>
                    </view>
                    <view
                        class="item"
                        v-for="(item, index) in yunList"
                        :key="index"
                        v-show="
                            yunList[0] &&
                            yunList[0].ls &&
                            yunList[0].ls.length > 0
                        "
                    >
                        <view class="i-title"> {{ item.title }} </view>
                        <view class="items-box">
                            <view
                                class="items"
                                v-for="(items, idx) in item.ls"
                                :key="idx"
                                :class="{ active: items.id == yunId }"
                                @click="onYunItems(items, idx)"
                            >
                                <view class="item-txt">{{ items.title }}</view>
                            </view>
                        </view>
                    </view>

                    <view class="item" v-if="brandList && brandList.length > 0">
                        <view class="i-title b-t">
                            <text>品牌</text>
                            <input
                                class="ipt-search"
                                type="search"
                                v-model="kwBrand"
                                :placeholder="placeholderBr"
                            />
                            <text
                                class="icon-font search-icon s-btn"
                                @click="doBrSearch()"
                                >{{ "\ue605" }}</text
                            >
                        </view>
                        <view
                            class="items-box item-bra comm-list"
                            id="gdLsbrandLs"
                        >
                            <view
                                class="items"
                                v-for="(item, index) in brandList"
                                :key="index"
                                :class="{ active: item.id == brandId }"
                                @click="onScreenItems(item, index)"
                            >
                                <view class="item-txt">{{ item.title }}</view>
                            </view>
                        </view>
                    </view>

                    <view
                        class="item"
                        v-if="
                            isShowTag &&
                            tagsList[0] &&
                            tagsList[0].ls &&
                            tagsList[0].ls.length > 0
                        "
                    >
                        <view class="i-title">
                            {{ tagsList[0].title ? tagsList[0].title : "" }}
                        </view>
                        <view class="items-box">
                            <view
                                class="items"
                                v-for="(items, index1) in tagsList[0].ls"
                                :key="index1"
                                :class="{ active: items.id == tagId }"
                                @click="onTagItems(items, index1)"
                            >
                                <view class="item-txt">{{ items.title }}</view>
                            </view>
                        </view>
                    </view>
                    <view
                        class="item"
                        v-if="supplierData && supplierData.length > 0"
                    >
                        <view class="i-title">
                            <text>来源</text>
                        </view>
                        <view
                            class="items-box is-soll comm-list"
                            v-infinite-scroll="loadFun"
                        >
                            <view
                                class="items"
                                v-for="(items, index1) in supplierData"
                                :key="index1"
                                :class="{ active: items.id == sourceId }"
                                @click="onSourceItems(items, index1)"
                            >
                                <view class="item-txt">{{ items.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="cat-btn-box" v-show="cateHandlersState == 1">
                    <view class="cat-reset" @click="resetFollAndBrand"
                        >重置</view
                    >
                    <view class="cat-comfirt" @click="sureFollAndBrand"
                        >选好了</view
                    >
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import config from "../../js/conf/Config.js";
import staticConst from "../../js/const/StaticConst.js";

import catList from "../../js/gd/CatList.js";
import eventCtrl from "../../js/event/EventCtrl.js";

import accessCtrl from "../../js/limit/AccessCtrl.js";

import goodsTlpCtrl from "../../js/gd/GoodsTlpCtrl.js";

import https from "../../js/https/Https.js";
import util from "@/js/util/Util.js";
import { mapGetters } from "vuex";

export default {
    props: [
        "showFiltersGoodsState",
        "filltersData",
        "storeLs",
        "yunList",
        "brandList",
        "tagsList",
        "md",
        "tabIndex",
    ],
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            // 单据状态筛选
            goodCatState: 0,
            catFisrtList: [],

            catSecondList: [],

            catThreeList: [],

            selectedCat: {
                fId: null, //一级分类
                fTit: "",
                sId: null, //二级分类
                sTit: "",
                tId: null, //三级分类
                tTit: "",
            },

            //仓库筛选
            cateStoreState: 0,

            // 产品筛选
            cateGoodsState: 0,

            goodStateList: [
                { name: "全部产品", id: "" },
                { name: "有货产品", id: "1" },
                { name: "无货产品", id: "2" },
                { name: "上架产品", id: "3" },
                { name: "下架产品", id: "4" },
            ],
            goodcgList: [
                { name: "全部产品", id: "0" },
                { name: "有货", id: "1" },
                { name: "无货", id: "2" },
            ],
            // 筛选
            cateHandlersState: 0,
            followId: -1, //筛选关注默认高亮
            followLs: {
                title: "关注",
                ls: [
                    { title: "30天内没有出售产品", id: 1 },
                    { title: "销量最多", id: 4 },
                    { title: "7天内发布的产品", id: 2 },
                    { title: "30天内发布", id: 3 },
                ],
            },
            yunId: -1, //筛选云店默认高亮

            brandId: -1, //筛选品牌默认高亮

            tagId: -1, //标签默认
            sourceId: -1, //来源默认
            HandlersLs: [], //存储筛选内容的展示
            isShowTag: true, //

            kwBrand: "",
            placeholderBr: "请输入品牌名称",
            isBrSearching: false,
            supplierData: [],
            is_soll: false,
            pfrom: 0,
        };
    },
    async created() {
        this.initLimit();
    },

    methods: {
        /****初始权限数据******/
        async initLimit() {
            this.isGoodsState = this.showFiltersGoodsState;
            this.storesState = this.filltersData.storesState;
            this.handlersState = this.filltersData.handlersState;
            this.statisticalIndex = this.filltersData.statisticalIndex;
            this.TimeStateIndex = this.filltersData.TimeStateIndex;
            this.StoresStateIndex = this.filltersData.StoresStateIndex;
            this.HandlersStateIndex = this.filltersData.HandlersStateIndex;
            this.getcgSuppList();
        },
        loadFun() {
            if (this.is_soll) return;
            this.pfrom += 20;
            this.getcgSuppList();
        },
        // 获取供货商列表
        async getcgSuppList() {
            let data = {
                pfrom: this.pfrom,
                pnum: 20,
            };
            const res = await https.cgSuppList(data);
            if (res.data && res.data.supp_ls) {
                res.data.supp_ls.map((v) => {
                    this.supplierData.push(v);
                });
            } else {
                this.is_soll = true;
            }
        },
        /***********************分类************BEGIN**************/
        /***初始分类数据***/
        initCatData() {
            let obj = { id: 0, title: "未分类" };
            this.catFisrtList = catList.getFirstCat();
            this.catFisrtList.push(obj);
        },
        /***重置分类***/
        resetCat() {
            (this.selectedCat = {
                fId: null, //一级分类
                fTit: "",
                sId: null, //二级分类
                sTit: "",
                tId: null, //三级分类
                tTit: "",
                selectId: null, //选择的ID
            }),
                (this.catSecondList = []);
            this.catThreeList = [];
            this.filltersData.cat = "类别";
            this.$emit("setCat", "");
            this.toggleCatsStateMask();
        },

        /***选择好分类***/
        sureCat() {
            this.$emit("setCat", this.selectedCat.selectId);
            this.toggleCatsStateMask();
        },

        /***点击选择fisrt分类列表***/
        onClickFirst(item) {
            if (item == null) return;
            this.selectedCat.selectId = this.selectedCat.fId = item.id;
            this.selectedCat.fTit = item.title;
            this.filltersData.cat = this.selectedCat.fTit;
            if (item.id == 0) return;

            this.getSecondCatData(item.id);
            this.catThreeList = [];
            this.selectedCat.sId = "";
            this.selectedCat.sTit = "";
            this.selectedCat.tId = "";
            this.selectedCat.tTit = "";
        },

        /***点击选择second分类列表***/
        onClickSecond(item) {
            if (item == null) return;
            this.selectedCat.selectId = this.selectedCat.sId = item.id;
            this.selectedCat.sTit = item.title;
            this.filltersData.cat =
                this.selectedCat.fTit + "/" + this.selectedCat.sTit;
            this.selectedCat.tId = "";
            this.selectedCat.tTit = "";
            this.getThreeCatData(item.id);
        },

        /***点击选择three分类列表***/
        onClickThree(item) {
            if (item == null) return;
            this.$debug.log("item.title", item.title);
            this.$debug.log("item.id", item.id);
            this.selectedCat.tTit = item.title;
            this.filltersData.cat =
                this.selectedCat.fTit +
                "/" +
                this.selectedCat.sTit +
                "/" +
                this.selectedCat.tTit;
            this.$debug.log("sTit", this.selectedCat.sTit);
            this.selectedCat.selectId = this.selectedCat.tId = item.id;
        },

        /***获取二级分类数据**/
        getSecondCatData(id) {
            this.catSecondList = catList.getSubCat(id);
        },

        /***获取三级分类数据***/
        getThreeCatData(id) {
            this.catThreeList = catList.getSubCat(id);
        },
        /***********************分类**********END****************/

        /*** 重置筛选 ***/
        resetFollAndBrand() {
            this.followId = -1;
            this.brandId = -1;
            this.yunId = -1;
            this.tagId = -1;
            let data = { brand: -1, attention: -1, tagid: -1, idyun: -1 };
            this.$emit("followAndbrand", data);

            this.HandlersLs = [];
            this.$emit("setListBoxHeight", false);
            this.toggleHandlersStateMask();
        },

        /*** 选好了筛选 ***/
        sureFollAndBrand() {
            this.toggleHandlersStateMask();
            // console.log(this.followId,this.brandId,this.yunId,this.tagId);
            // if(this.followId == -1 &&  this.brandId == -1 && this.yunId == -1 && this.tagId == -1) return;
            let data = {
                brand: this.brandId,
                attention: this.followId,
                idyun: this.yunId,
                tagid: this.tagId,
                suppid: this.sourceId,
            };
            this.$emit("followAndbrand", data);
            if (this.HandlersLs.length > 0) {
                this.$emit("setListBoxHeight", true);
            } else {
                this.$emit("setListBoxHeight", false);
            }
        },

        /*** 点击删除 筛选的关注or品牌***/
        removeHandItem(item, index) {
            if (item.type == "gz") {
                this.followId = -1;
            }
            if (item.type == "yd") {
                this.yunId = -1;
            }
            if (item.type == "pp") {
                this.brandId = -1;
            }
            if (item.type == "bq") {
                this.tagId = -1;
            }
            if (item.type == "ly") {
                this.sourceId = -1;
            }
            this.HandlersLs.splice(index, 1);
            this.sureFollAndBrand();
            if (this.HandlersLs.length > 0) {
                this.$emit("setListBoxHeight", true);
            } else {
                this.$emit("setListBoxHeight", false);
            }
        },

        /*** 筛选   点击关注item ***/
        onFollowItems(item, index) {
            if (this.followId == item.id) return;
            this.followId = item.id;
            item.type = "gz";
            this.setHandlersData(item);
        },

        /*****点击云店筛选*****/
        onYunItems(item, index) {
            if (this.yunId == item.id) return;
            this.yunId = item.id;
            item.type = "yd";
            this.setHandlersData(item);
        },

        /*** 筛选  点击品牌item ***/
        onScreenItems(item, index) {
            if (this.brandId == item.id) return;
            this.brandId = item.id;
            item.type = "pp";
            this.setHandlersData(item);
        },

        /****点击标签筛选****/
        onTagItems(item, index) {
            if (this.tagId == item.id) return;
            this.tagId = item.id;
            item.type = "bq";
            this.setHandlersData(item);
        },
        /****点击来源筛选****/
        onSourceItems(item, index) {
            if (this.sourceId == item.id) return;
            this.sourceId = item.id;
            let data = {
                type: "ly",
                id: item.id,
                name: item.name,
            };
            this.setHandlersData(data);
        },

        /*** 设置  HandlersLs 数组只允许出现一个关注 与 一个品牌***/
        setHandlersData(item) {
            for (let i = 0; i < this.HandlersLs.length; i++) {
                if (this.HandlersLs[i].type == item.type) {
                    this.HandlersLs.splice(i, 1);
                }
            }
            this.HandlersLs.push(item);
        },

        //显示分类面板
        async toggleHandlersStateMask(type) {
            if (type == "show") {
                this.isShowTag = await accessCtrl.getGdsTgsLimit();
                await accessCtrl.getGdsTgsLimit();
                this.toggleStoreStateMask();
                this.toggleCatsStateMask();
                this.toggleGoodsStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateHandlersState = 2;
            setTimeout(() => {
                this.cateHandlersState = state;
            }, timer);
            if (!type) return;
        },

        /*** 打开仓库方式  --  开始 ***/
        changeStoreState(item, index) {
            if (this.filltersData.TimeStateIndex == index) return;
            this.filltersData.TimeStateIndex = index;
            this.filltersData.store = item.name;
            this.$emit("setStoreId", item.id);
        },

        toggleStoreStateMask(type) {
            if (type == "show") {
                this.toggleCatsStateMask();
                this.toggleGoodsStateMask();
                this.toggleHandlersStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateStoreState = 2;
            setTimeout(() => {
                this.cateStoreState = state;
            }, timer);
        },
        /*** 打开仓库统计方式  --  结束 ***/

        /*** 打开产品筛选方式  --  开始 ***/
        changeGoodState(item) {
            if (this.filltersData.StoresStateIndex == item.id) return;
            this.filltersData.StoresStateIndex = item.id;
            this.filltersData.inStock = item.name;
            this.$emit("setGoods", item.id);
        },

        //显示分类面板
        toggleGoodsStateMask(type) {
            if (type == "show") {
                this.toggleStoreStateMask();
                this.toggleCatsStateMask();
                this.toggleHandlersStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.cateGoodsState = 2;
            setTimeout(() => {
                this.cateGoodsState = state;
            }, timer);
        },
        /*** 打开产品方式  --  结束 ***/

        //显示 类别 分类面板
        toggleCatsStateMask(type) {
            if (type == "show") {
                this.toggleStoreStateMask();
                this.toggleGoodsStateMask();
                this.toggleHandlersStateMask();
            }
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.goodCatState = 2;
            setTimeout(() => {
                this.goodCatState = state;
            }, timer);
            if (!type) return;
            this.initCatData();
        },

        onClickPageHandler() {
            if (this.goodCatState == 1) this.toggleCatsStateMask();

            if (this.cateHandlersState == 1) this.toggleHandlersStateMask();

            if (this.cateStoreState == 1) this.toggleStoreStateMask();

            if (this.cateGoodsState == 1) this.toggleGoodsStateMask();
        },

        doBrSearch() {
            this.$emit("getBrand", this.kwBrand);
        },

        handlerScroll() {
            this.$nextTick(() => {
                let flag = util.scrollData("#gdLsbrandLs");
                console.log("flag============:", flag);
                if (flag) {
                    this.doBrSearch();
                }
            });
        },
    },

    mounted() {
        if (document.querySelector("#gdLsbrandLs"))
            document
                .querySelector("#gdLsbrandLs")
                .addEventListener("scroll", this.handlerScroll, true);
    },
};
</script>
<style lang="scss">
.store-num {
    position: absolute;
    left: 200px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 115px;
}
.f-tit-txt {
    display: inline-block;
    white-space: nowrap;
    // width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    // width: 25%;
}
.screening-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    // padding: 6px;
    // border-bottom: 1px solid #ECECEC;
    height: 40px;
    background-color: #f3f3f2;
    view {
        cursor: pointer;
        font-size: 14px;
        max-width: 120px;
        text {
            padding-left: 4px;
            font-size: 8px;
            color: #333;
        }
    }
    .divider {
        color: #ccc;
    }
}
.Handlers-box {
    padding: 3px 10px;
    height: 29px;
    display: flex;
    align-items: center;
    background-color: #f3f3f2;
    border-top: 1px solid #e3e3e2;
    .item {
        // width: 50px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        image {
            cursor: pointer;
            margin-left: 2px;
            width: 12px;
            height: 12px;
        }
    }
    .h-rest-txt {
        color: #666;
        position: absolute;
        right: 5px;
        cursor: pointer;
    }
    .h-rest-txt:hover {
        color: #333;
    }
}
.cate-list {
    view {
        padding-left: 10px;
        line-height: 30px;
        font-size: 15px;
        cursor: pointer;
    }
    view:hover {
        background-color: #ddd;
    }
}
.active {
    color: #007aff;
}

.selected-icon {
    position: absolute;
    color: #3388ff;
    right: 5px;
    font-size: 24px;
}

.mask-top {
    top: 110px;
}
.scr-box {
    height: calc(100% - 20px);
    background: #fff;
    padding: 10px;
    .item {
        .i-title {
            font-size: 16px;
            // font-weight: 700;
        }

        .b-t {
            display: flex;
            align-items: center;
            position: relative;
            padding: 8px 0;
            .ipt-search {
                width: 230px;
                height: 26px;
                margin-left: 10px;
                background-color: #f8f8f8;
                border: 1px solid #eee;
                padding-left: 10px;
                padding-right: 30px;
                font-size: 13px;
            }
            .s-btn {
                cursor: pointer;
                font-size: 14px;
                position: absolute;
                right: 16px;
            }
        }
        .item-bra {
            max-height: 300px;
        }
        .items-box {
            display: flex;
            // justify-content: space-between;
            justify-content: space-evenly;
            flex-wrap: wrap;
            .follow {
                width: 49%;
                border-radius: 20px;
                height: 40px;
                background: #eee;
                margin-bottom: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                .item-txt {
                    width: calc(100% - 10px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }
            }
            .follow:hover {
                background: #ddd;
            }
            .items {
                // width: 32%;
                width: 80px;
                padding-left: 10px;
                padding-right: 10px;
                border-radius: 20px;
                height: 40px;
                background: #eee;
                margin-bottom: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                .item-txt {
                    width: calc(100% - 10px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }
            }
            .items:hover {
                background: #ddd;
            }
            .active {
                background: #3388ff;
                color: #fff;
            }
            &.is-soll {
                height: 200px;
                overflow: auto;
            }
        }
    }
}
</style>